<template>
    <div class="item-chart" v-if="item.id">
      <dv-border-box-8>
        <div class="boder">
          <div  class="wrap">
            <div class="item-chart-title"><div>{{item.title}}</div></div>
            <div class="no-data" :style="{opacity}">暂无数据</div>
            <div :id="item.id" class="chart-div"></div>
          </div>
        </div>
      </dv-border-box-8>
    </div>
</template>

<script>
  export default {
    components: {},
    props: {
      item: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        opacity: 0.6,
        timer:null,
        data:null
      };
    },
    watch: {
      item: {
        handler(val) {
          this.draw()
        },
        deep: true
      }
    },
    created() {

    },
    methods: {
      draw(item) {
        this.opacity=0.6
        this.myChart = this.$echarts.init(document.getElementById(this.item.id))
        let data = []
        this.item.data.forEach(it => {
          this.opacity=0
          data.push({
            value: it.value||0,
            name: it.title,
            itemStyle: {
              color: it.color
            }
          })
        })
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend:{
            show:true,
             right: '1vw',
             align:'right',
             orient: 'vertical',
              top: 'center',
               textStyle: {
                      color:'#fff',  //文字颜色
              }
          },
          series: [{
            name: this.item.title,
            type: 'pie',
            radius: ['25%', '50%'],
            labelLine: {
              length: 20
            },
            minAngle: 5, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
            avoidLabelOverlap: true, //是否启用防止标签重叠策略

            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  ',
              color: 'white',
              backgroundColor: '#0352be',
              borderColor: 'rgba(255,255,255,0.5)',
              borderWidth: 0,
              borderRadius: 4,
              fontSize: 20,
              normal: {
                formatter(v) {
                  // console.log(v,'----');
                  // v.name + ':' +
                  return Math.round(v.percent) + '%'
                },
                textStyle: {
                  fontSize: 14,
                  borderWidth: 0,
                  color: '#FFF'

                },
              },
            },
            data
          }]
        }
        this.myChart.setOption(option);
        if(this.timer){
          clearInterval(this.timer)
        }
        setInterval(()=>{
          this.myChart.clear()
          this.myChart.setOption(option);
        },8000)
      },
    }
  };
</script>

<style lang="scss" scoped>
  .item-chart {
    // background-image: url("~@/assets/screen/img3.png");
    background-size: cover;
    background-position: center center;
    margin-top: 1.1vw;
    width: 24vw;
    height: 11.658vw;
    .boder{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 3px;
      .wrap{
        width: 100%;
        height: 100%;
        background: rgb(40,91,156);
        position: relative;
      }
    }

    &-title{
      width:1.9vw;
      height:80%;
      box-sizing: border-box;
      padding-left: 0.12vw;
      left: 0;
      top: 10%;
      font-size: 1.2vw;
      color: #fff;
      border-color: transparent rgb(70,149,205)  transparent rgb(70,149,205);
      border-width:1.2vw 0 1.2vw 1.9vw;
       border-style: solid;
      position: absolute;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      div{
        margin-left: -2.2vw;
      }
    }
    .no-data{
      color:#fff;
      font-size: 1.2vw;
      position: absolute;
      width: 100%;
      text-align: center;
       line-height: 11.658vw;
       left: 0;
       top: 0;
    }
    .chart-div{
      width: 100%;
      height: 100%;
      // transform: translateY(-0.08rem);
    }

  }
</style>
